{% extends 'search_result.html' %}
{% block page_title %}{{ tac.structure_id }}.{{ tac.name }}{% endblock page_title %}

{% block navbar_status %}
                <li class="active"><a>详情 <span class="sr-only">(current)</span></a></li>
                <li><a href="/community/group" >社区<span class="sr-only">(current)</span></a></li>
{% endblock navbar_status %}


      {% block main_div %}
        <div class="col-md-12">
          <div class="page-header" style="margin-left: 10px">
              <h1 style="position:relative;"><a href="/structure/?q={{ tac.structure_id }}">{{ tac.structure_id }}</a>.{{ tac.name }} <br><small>{{ tac.type }}</small>{% if tac.updatetime %}<small style="position:absolute; bottom:0px; right:0px; ">{{ tac.updatetime|date:"Y.m.d" }} <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" title="关于该时间的说明" data-placement="left" data-container="body" data-content="该时间是指服务器上该文件的修改时间，若该时间大于HOL4 Github项目的develop分支中，该文件的提交时间，即说明此页是最新信息。"><span id="time-info" class="glyphicon glyphicon-question-sign" style="font-size:75%; color:cornflowerblue;"></span></a></small>{% endif %}</h1>

          </div>
          <script>
            $(function () {
              $('[data-toggle="popover"]').popover()
            })
          </script>
        </div>
        <div class="col-md-12">
        <table class="table" frame=void>
          <tbody>
              {% if tac.synopsis == None %}
                <tr>
                <td><p class="lead"> No details page </p></td>
                <td><p class="lead text-right"> 无详情页 </p></td>
                </tr>
              {% else %}
                  <div class="alert alert-info" role="alert" style="text-align: center;">
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  如果出现中文翻译大幅错误的情况，请尝试点击
                    <a href="/translate?name={{ tac.name|urlencode }}&stru={{ tac.structure_id|urlencode }}" class="alert-link">重译</a>，谢谢！
                  </div>
              {% endif %}
              {% for key,value in tac.items %}
                {% if key in contentlist and value != None %}
                  <tr>
                    <td style="width: 59%;">
                        <div class="panel panel-default">
                          <div class="panel-heading"> 
                            <h3 class="panel-title text-uppercase">{{ key }}</h3>
                          </div>
                          <div class="panel-body" style="white-space: pre-line;">
                            <p id="{{ key }}_text" style="margin-top: 1px;">{{ value }}</p>
                                <script>
                                  var element=document.getElementById("{{ key }}_text");
                                      element.innerHTML=element.innerHTML.replace(/{\*/g, '\n<span class="code">').replace(/\*}/g, '</span>\n').replace(/%\*/g, '<span class="function">').replace(/\*%/g, '</span>') ;
                                </script>
                          </div>
                        </div>
                    </td>
                {% endif %}
                {% if key|slice:":-3" in contentlist and value != None %}
                    <td>
                        <div class="panel panel-default">
                          <div class="panel-heading"> 
                            <h3 class="panel-title text-uppercase">{{ key }}</h3>
                          </div>
                          <div class="panel-body" style="white-space: pre-line;">
                            <p id="{{ key }}_text" style="margin-top: 1px;">{{ value }}</p>
                                <script>
                                  var element=document.getElementById("{{ key }}_text");
                                      element.innerHTML=element.innerHTML.replace(/{\*/g, '\n<span class="code">').replace(/\*}/g, '</span>\n').replace(/%\*/g, '<span class="function">').replace(/\*%/g, '</span>') ;
                                </script>
                          </div>
                        </div>
                    </td>
                  </tr>
                {% endif %}
                {% if key == 'seealso' %}
                <tr>
                <td colspan="2" >
                  {% if value != None %}
                    <div class="panel panel-default">
                      <div class="panel-heading"> 
                        <h3 class="panel-title text-uppercase">{{ key }}</h3>
                      </div>
                      <div class="panel-body" >
                      {% for t,u in value.items %}
                        <a href={{ u }} style="display: block;" target="_blank"><p style="margin: 5px;" class="navbar-text">{{ t }} <span class="glyphicon glyphicon-new-window"></span></p></a>
                      {% endfor %}
                      </div>
                    </div>
                  {% endif %}
                </td>
                </tr>
                {% endif %}
              {% endfor %}
          </tbody>
        </table>
        </div>
        <div id="comments" class="col-md-12" >
        {% for com in coms %}
          <div class="panel panel-primary">
            <div class="panel-heading"><b>{{ com.username }}</b>的留言: 
            {% if user.uid == com.user.uid %}
            <div class="navbar-right"><a href="/comment/delete?id={{ com.id }}&t=c&url={{ request.get_full_path }}" style="color: white; margin-right: 20px;">删除 <span class="glyphicon glyphicon-trash"></span></a></div>
            <div class="navbar-right"><a href="/comment/statu_change?id={{ com.id }}&note=1&url={{ request.get_full_path }}" style="color: white; margin-right: 20px;">转存为笔记 <span class="glyphicon glyphicon-edit"></span></a></div>
            {% endif %}
            </div>
            <div class="panel-body">
            <div id="{{ com.id }}">
                  <!-- Server-side output Markdown text -->
                <textarea style="display:none;">{{ com.content }}</textarea>             
            </div>
                        {% if com.replys|length != 0 %}
            <div class="col-md-10">
                <table class="table">
            {% for reply in com.replys %}
                <tr>
                    <td>{{ reply.content }} - <a href="/user/?uid={{ reply.user.uid }}">{{ reply.user.name|urlencode }}</a> <small>{{ reply.time }}</small>{% if reply.user.uid == user.uid %} <a href="/comment/delete?id={{ reply.id }}&t=qr&url={{ request.get_full_path }}"><span class="glyphicon glyphicon-trash"></span></a> {% endif %}</td>
                </tr>
            {% endfor %}
                </table>
            </div>
            {% endif %}
            {% if user != None %}
            <div class="col-md-10">
                <form action="{{ request.get_full_path }}&p={{ com.id }}" method="POST">
                {% csrf_token %}
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Quick Reply" name="rtext">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">Reply</button>
                        </span>
                    </div><!-- /input-group -->
                </form>
            </div>
            {% endif %}
            </div>
            <div class="panel-footer text-right">{{ com.time }}</div>
          </div>
          <script type="text/javascript">
            $(function() {
              var testView = editormd.markdownToHTML("{{ com.id }}", {
                    // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
                    // htmlDecode : true,  // Enable / disable HTML tag encode.
                    // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
                });
            });
          </script>  
        {% endfor %}
        </div>
        {% if user != None %}
        <div class="col-md-12">
        <script type="text/javascript">
          function save_note() {
            var queryUrl = $('#markdown-text').attr("action");
            var exportUrl = queryUrl + '&noteflag=1#markdown-text'
            $('#markdown-text').attr("action",exportUrl);
            $('#markdown-text')[0].submit();
            $('#markdown-text').attr("action",queryUrl);
          }
        </script>
        <script type="text/javascript">
          function push_synopsis_cn()
            {
            var r=confirm("提交描述将覆盖现有的\"SYNOPSIS_CN\"中的内容，作为提示信息在搜索结果中展示，请慎重确认是否提交描述与提交的内容。")
            if (r==true)
              {
                var queryUrl = $('#markdown-text').attr("action");
                var exportUrl = queryUrl + '&noteflag=2#markdown-text'
                $('#markdown-text').attr("action",exportUrl);
                $('#markdown-text')[0].submit();
                $('#markdown-text').attr("action",queryUrl);
              }
            else
              {
                save_note()
              }
            }
        </script>
        {% if errormsg != None %}
        <div class="alert alert-danger" role="alert">{{ errormsg }}</div>
        {% endif %}
        <form id="markdown-text" action="{{ request.get_full_path }}" method="POST">
        {% csrf_token %}
          <div id="editor" style="z-index:1;">
              <!-- Tips: Editor.md can auto append a `<textarea>` tag -->
              {% if note == None %}
              <textarea id="comment-md" name="conmment-text" style="display:none;"></textarea>
              {% else %}
              <textarea id="comment-md" name="conmment-text" style="display:none;">{{ note.content }}</textarea>
              {% endif %}
          </div>
          <div class="col-md-4 navbar-right" style="margin-bottom: 200px;">
          {% if tac.type == 'thm' or tac.synopsis == None or tac.synopsis == 'No official synopsis.' %}
            <button class="btn btn-primary navbar-right" type="button" onclick="push_synopsis_cn()" style="margin-right: 10px;">提交描述</button>
          {% endif %}
            <button class="btn btn-primary navbar-right" type="submit" style="margin-right: 8px;">发表留言</button>
            <button class="btn btn-success navbar-right" type="button" onclick="save_note()" style="margin-right: 8px;">保存笔记</button>
          </div>
          <script type="text/javascript">
            // function jssubmitText(n) = document.getElementById('markdown-text').action=""
          </script>
        </form>
      <script src="/static/editor.md/editormd.min.js"></script>
      {% if tac.type == 'thm' or tac.synopsis == None or tac.synopsis == 'No official synopsis.' %}
      <script type="text/javascript">
          $(function() {
              var editor = editormd("editor", {
                  // width: "100%",
                  height: "500px",
                  autoFocus: false,
                  placeholder: "使用Markdown编辑留言...\n描述不支持Markdown格式显示，可以使用%*和*%符号对标识方法名。",
                  // markdown: "xxxx",     // dynamic set Markdown text
                  path : "/static/editor.md/lib/"  // Autoload modules mode, codemirror, marked... dependents libs path
              });
          });
      </script>
      {% else %}
      <script type="text/javascript">
          $(function() {
              var editor = editormd("editor", {
                  // width: "100%",
                  height: "500px",
                  watch: false,
                  autoFocus: false,
                  placeholder: "使用Markdown编辑留言...",
                  // markdown: "xxxx",     // dynamic set Markdown text
                  path : "/static/editor.md/lib/"  // Autoload modules mode, codemirror, marked... dependents libs path
              });
          });
      </script>
      {% endif %}
      </div>
      {% endif %}
      <script src="/static/editor.md/editormd.js"></script>
      <script src="/static/editor.md/lib/marked.min.js"></script>
      <script src="/static/editor.md/lib/prettify.min.js"></script>
      {% endblock main_div %}
